<!-- 我发布的 -->
<template>
	<view>
		<view class="p-3">
			<u-search
				placeholder="搜索"
				placeholder-color="#86909c"
				bg-color="#fff"
				@search="searchKeyFn"
				v-model="projectName"
				:show-action="false"
			></u-search>
		</view>
		<view class="tabsBox ">
			<u-tabs
				:font-size="34"
				:height="80"
				bg-color="rgb(242 243 245)"
				inactive-color="#4E5969"
				active-color="#1d2129"
				:bar-width="60"
				:list="navList"
				:is-scroll="false"
				:current="navCurrent"
				@change="navChangeFn"
			></u-tabs>
		</view>
		<view class=" px-3 d-flex">
			<!-- :style="{ color: color, fontWeight: fontWeight }" -->
			<view class="date" @click="acceptDatePickerFn" style="z-index: 99;">
				<view class="pr d-flex ">
					反馈时间
					<view class="d-flex flex-column pl-1">
						<view
							class="iconfont icon-shangjiantou "
							:class="changeColor ? 'text-primary' : 'text-success'"
							style="height: 20rpx; font-size: 22rpx; margin-top: -6rpx;"
						></view>
						<view
							class="iconfont icon-xiajiantou "
							:class="changeColor ? 'text-success' : 'text-primary'"
							style="height: 20rpx;font-size: 22rpx;margin-top: -6rpx;"
						></view>
					</view>
				</view>
			</view>
			<view class="operateBox">
				<u-dropdown>
					<u-dropdown-item
						v-model="rootInformationEnum"
						:title="rootInformList[rootInformationEnum].label"
						:options="rootInformList"
						@change="changeRootInformationEnumFn"
					></u-dropdown-item>
					<u-dropdown-item
						v-model="projectStage"
						:title="projectPhaseList[projectStage].label"
						:options="projectPhaseList"
						@change="changeProjectStageFn"
					></u-dropdown-item>
				</u-dropdown>
			</view>
		</view>

		<z-paging ref="paging" v-model="dataList" use-page-scroll refresher-no-transform @query="queryList">
			<view
				class="projectBox p-3 m-3 rounded-8 bg-write line-h-md text-l"
				v-for="(item, index) in dataList"
				:key="index"
				@click="projectDetailsFn(item)"
			>
				<view class="d-flex j-sb a-center">
					<view class="font text-h">发布时间：{{ item.publishTime }}</view>

					<view class=" rounded  px-2 py-1 font " :class="[changeBg(item)]">
						{{ item.feedbackPhaseName }}
					</view>
				</view>
				<view class="font-lg text-main font-weight">{{ item.projectName }}</view>
				<view class="u-flex u-row-between">
					<view class="bg-grey  px-1 py text-primary font">{{ item.rootInformationTagName }}</view>
					<view class="text-primary font">{{ item.projectStageName }}</view>
				</view>

				<view class="p-2 my-2 bg-error-2 rounded line-h-md">
					<view class="d-flex a-center">
						<view class="flex-1 d-flex" v-if="navCurrent == 0">
							<text class="text-tips font">接收倒计时：</text>
							<countdown :time="item.feedbackForewarningEndDate"></countdown>
							<!-- <text class="text-error font font-weight ">
								<countdown time="2024-11-19 10:59:31"></countdown>
							</text> -->
						</view>
						<view class="flex-1 d-flex" v-else>
							<text class="text-tips font">反馈倒计时：</text>
							<!-- <text class="text-error font font-weight "></text> -->
							<countdown :time="item.feedbackForewarningEndDate"></countdown>
						</view>
					</view>
				</view>

				<view class="p-2 my-2 bg-grey rounded line-h-md">
					<view class="d-flex a-center">
						<view class="flex-1 ">
							<text class="text-tips font">信息类型：</text>
							<text class="text-main font ">{{ item.infoTypeName }}</text>
						</view>
						<view class="flex-1">
							<text class="text-tips font">预计产值规模：</text>
							<text class="text-main font ">{{ item.outputScale }}</text>
						</view>
					</view>
					<view class="d-flex a-center">
						<view class="flex-1">
							<text class="text-tips font">省份：</text>
							<text class="text-main font ">{{ item.province }}</text>
						</view>
						<view class="flex-1">
							<text class="text-tips font">城市：</text>
							<text class="text-main font ">{{ item.city }}</text>
						</view>
					</view>
					<view class="d-flex j-sb mt-2 a-center">
						<view class="d-flex a-center">
							<view class="iconfont icon-calendar-todo-fill text-primary"></view>
							<view class="text-main font ml-1">{{ item.projectAddressName }}</view>
						</view>
					</view>
				</view>
				<view class="d-flex j-sb mt-2 a-center">
					<view class="listBnt d-flex">
						<button
							v-if="navCurrent == 0"
							type="primary"
							class="primaryListBigBnt btn-cancel"
							@click.stop="receptionConditionFn(item)"
						>
							接收情况
						</button>
						<button
							v-if="navCurrent == 1"
							class="errorListBigBnt btn-cancel"
							@click.stop="feedbackSituationFn(item)"
						>
							反馈情况
						</button>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
import { busiInfoForewarningList } from '@/api/apis.js';
import countdown from './countdown.vue';
import { rootInformList, projectPhaseList } from '@/utils/data.js';
export default {
	components: { countdown },
	data() {
		return {
			projectName: '',
			activeIndex: 0,
			color: 'rgb(96, 98, 102)',
			iconColor: '#c0c4cc',
			fontWeight: 'normal',
			changeColor: false,
			rootInformList,
			projectPhaseList,
			projectStage: 4, //项目阶段
			rootInformationEnum: 2, //信息源
			forewarningInfoClassify: '0', //审核状态
			navCurrent: 0,
			dataList: [],
			navList: [
				{
					name: '未接收'
				},
				{
					name: '未反馈'
				}
			]
		};
	},
	options: {
		styleIsolation: 'shared' // 解除样式隔离
	},
	methods: {
		//改变颜色
		changeBg(item) {
			if (item.feedbackPhaseName === '未反馈' || item.feedbackPhaseName == '未通过') {
				return 'bg-error-2 text-error';
			} else if (item.feedbackPhaseName === '未接收' || item.feedbackPhaseName == '未通过') {
				return 'bg-success-1 text-primary';
			}
		},
		navChangeFn(e) {
			this.navCurrent = e;
			this.$refs.paging.reload();
		},
		searchKeyFn() {
			this.$refs.paging.reload();
		},
		queryList(pageNo, pageSize) {
			if (this.navCurrent == 0) {
				this.forewarningInfoClassify = 0;
			} else if (this.navCurrent == 1) {
				this.forewarningInfoClassify = 1;
			}
			busiInfoForewarningList({
				page: pageNo,
				size: pageSize,
				forewarningInfoClassify: this.forewarningInfoClassify,
				publishTimeSort: this.changeColor ? 'ASC' : 'DESC',
				rootInformationTag: this.rootInformationEnum == 2 ? '' : this.rootInformationEnum,
				projectStage: this.projectStage == 4 ? '' : this.projectStage,
				projectName: this.projectName
			}).then(res => {
				if (res.code == 10000) {
					this.$refs.paging.complete(res.data.data);
				} else {
					this.$refs.paging.complete(false);
				}
			});
		},
		//点击发布时间
		acceptDatePickerFn() {
			this.changeColor = !this.changeColor;
			this.color = this.changeColor ? '#4e5969' : '#606266';
			this.fontWeight = this.changeColor ? '700' : 'normal';
			this.iconColor = this.changeColor ? '#4e5969' : '#c0c4cc';
			this.$refs.paging.reload();
		},
		changeRootInformationEnumFn(e) {
			this.rootInformationEnum = e;
			this.$refs.paging.reload();
		},
		//点击下拉选
		changeProjectStageFn(e) {
			this.projectStage = e;
			this.$refs.paging.reload();
		},
		//项目详情
		projectDetailsFn(item) {
			this.$Router.push({
				path: '/detailPages/pages/projectDetailsFeedbackSituation/index',
				query: {
					busiInfoId: item.busiInfoId
				}
			});
		},
		//接收情况
		receptionConditionFn(item) {
			this.$Router.push({
				path: '/detailPages/pages/projectDetailsReceived/index',
				query: {
					busiInfoId: item.busiInfoId
				}
			});
		},
		//反馈情况
		feedbackSituationFn(item) {
			this.$Router.push({
				path: '/detailPages/pages/projectDetailsFeedbackSituation/index',
				query: {
					busiInfoId: item.busiInfoId
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
::v-deep .u-content {
	height: 80rpx !important;
}
::v-deep .uicon-search {
	color: #0052d9 !important;
}
::v-deep .u-dropdown__menu__item__text ::after {
	font-family: 'iconfont';
	content: '\eb6d';
	padding-left: 10rpx;
	color: #0052d9;
	font-size: 20rpx;
}
::v-deep .u-dropdown__menu__item__arrow {
	display: none !important;
}

.operateBox {
	width: 310rpx;
}
.date {
	line-height: 80rpx;
	font-size: 28rpx;
}
.active-class {
	background-color: #0052d9;
	color: #fff;
}

::v-deep .u-dropdown__content {
	width: 750rpx !important;
	left: -170rpx !important;
}

::v-deep .u-tab-bar {
	background-color: #0052d9 !important;
}
</style>
